<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link href="../static/bootstrap/css/bootstrap-table.min.css" rel="stylesheet" type="text/css"/>
    <link href="../static/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="../static/bootstrap/css/bootstrapValidator.min.css" rel="stylesheet" type="text/css"/>
    <link href="../static/plugins/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="../static/css/3d.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../static/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../static/bootstrap/js/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="../static/bootstrap/js/bootstrapValidator.js"></script>
    <script type="text/javascript" src="../static/bootstrap/js/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript" src="../static/bootstrap/js/bootstrap-table-export.js"></script>
    <script src="../static/plugins/layui/layui.all.js"></script>
    <script type="text/javascript" src="../static/js/tableExport.min.js"></script>
    <script type="text/javascript" src="../static/js/user_list.js"></script>
    <script type="text/javascript" src="../static/js/fq.js"></script>
    <style>
        body {
            margin: 0px;
            width: 2000px;
            min-width: 400px;
            max-width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript"></script>
</head>


<body id="body">

<div id="snowFlow"></div>
{% if request.session.identity %}
    <div id="table" style="width: 75%;margin: 0 auto;">
        <div class="panel-body" style="padding-bottom:0px;">
            <div id="toolbar" class="layui-btn-group">
                <button id="btn_add" type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-toggle="modal"
                        data-target="#addUserModal">
                    <i class="layui-icon">&#xe654;</i>
                </button>
                <button id="btn_edit" type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-toggle="modal"
                        data-target="#updateUserModal">
                    <i class="layui-icon">&#xe642;</i>
                </button>
                <button id="user_delete" type="button" class="layui-btn layui-btn-primary layui-btn-sm"
                        data-toggle="modal"
                        data-target="#deleteModal"><i class="layui-icon">&#xe640;</i>
                </button>
                <button id="reset" type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-toggle="modal"
                        data-target="#resetpass"><i class="layui-icon">&#xe606;</i>
                </button>
                <span>　
        </span>
                <input type="text " id="seach_user" class="input-sm" style="width:25%" placeholder="请输入用户名">
                <label>
                    <button class="layui-btn layui-btn-primary layui-btn-sm" id="btn_user" type="button">查询</button>
                </label>
            </div>
            <table id="user_table"></table>
        </div>
        <div><span class="label label-info" style="font-size: small">电话、邮箱仅作当液压系统发生故障时，通知用户该故障信息</span>
        </div>
    </div>
    <!--新增-->
    <div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h4 class="modal-title" class="text-center">添加用户</h4>
                </div>
                <div class="modal-body">
                    <form name="add_form" id="addUserForm" class="form-horizontal">
                        <div class=" form-group">
                            <label class="col-lg-3 control-label">用户名:</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="username" id="username"
                                       placeholder="请输入用户名">
                            </div>

                        </div>
                        <div class=" form-group">
                            <label class="col-lg-3 control-label">密　码:</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="pass" id="pass" placeholder="请输入密码">
                            </div>

                        </div>
                        <div class=" form-group">
                            <label class="col-lg-3 control-label">邮　箱:</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="email" id="email" placeholder="请输入邮箱">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">电　话:</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="tel" id="tel" placeholder="请输入电话">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">身　份:</label>
                            <div class="col-lg-5 checkbox-inline">
                                <input type="radio" name="identity" id="optionsRadios1" value="1"> 管理员
                                <input type="radio" name="identity" id="optionsRadios2" value="0" checked>普通用户
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="addUserBtn">确认</button>
                </div>
            </div>

        </div>
    </div>

    <!--修改-->
    <div class="modal fade" id="updateUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h4 class="modal-title" class="text-center">修改用户</h4>
                </div>
                <div class="modal-body">
                    <form name="add_form" id="updateUserForm" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-lg-3 control-label">用户名:</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="user_id" id="upuser_id"
                                       style="display: none">
                                <input type="text" class="form-control" name="username" id="updateusername" readonly>
                            </div>
                        </div>
                        <div class=" form-group">
                            <label class="col-lg-3 control-label">邮　箱:</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="email" id="updateemail"
                                       placeholder="请输入邮箱">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">电　话:</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="tel" id="updatetel"
                                       placeholder="请输入电话">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="updateUserBtn">确认</button>
                </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 删除-->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document" style="width: 170px">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h4 class="modal-title" id="tip">确认删除吗？</h4>
                    <input id="text_user_id" style="display: none"/>
                </div>
                <div class="modal-footer text-center">
                    <button type="button" id="btn_close" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" id="btn_delete" class="btn btn-primary">确认</button>
                </div>
            </div>
        </div>
    </div>
    {#重置密码#}
    <div class="modal fade" id="resetpass" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document" style="width: 170px">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h4 class="modal-title" id="tip">确认重置吗？</h4>
                    <input id="text_reset" style="display: none"/>
                </div>
                <div class="modal-footer text-center">
                    <button type="button" id="btn_close" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" id="btn_reset" class="btn btn-primary">确认</button>
                </div>
            </div>
        </div>
    </div>
{% else %}
    <h1 class="text-center">您没有权限</h1>
{% endif %}
</body>

<script>

    window.onload = function () {
        snowFlow();

        function snowFlow(left, height, src) {
            var container = document.createElement('div');
            var pic = document.createElement('img');
            var snowFlow = document.getElementById('snowFlow');
            pic.className = 'pic';
            container.className = 'container';
            snowFlow.appendChild(container);
            container.appendChild(pic);
            container.style.left = left + 'px';
            container.style.height = height + 'px';
            pic.src = '../static/img/snow.png';
            setTimeout(function () {
                snowFlow.removeChild(container);
            }, 5000);
        }

        setInterval(function () {
            var left = Math.random() * window.innerWidth;
            var height = Math.random() * window.innerHeight;
            var src = '../static/img/snow.png';
            snowFlow(left, height, src);
        }, 500)
    }

</script>
</html>